<template>
    <div class="HomeIcon">
        <van-swipe  indicator-color="white">
            <van-swipe-item v-for="items of pages" :key="items.id" class="icons">
                <div v-for="item of items" :key="item.id" class="icons-item">
                    <img :src="item.imgUrl" alt="">
                    <p>{{item.title}}</p>
                </div>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script>
export default {
    name:"HomeIcon",
    data() {
        return {
        }
    },
    props:{
        icons:{
            type:Array
        }
    },
    computed: {
        pages(){            
            const pages = [];
            for(let i = 0;i<this.icons.length/8;i++){
                pages[i] = this.icons.slice(8*i,8*(i+1))
            }
            return pages;
        }
    },
}
</script>
<style lang="scss" scoped>
    .HomeIcon{
        .icons{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 25vw 25vw; 
            .icons-item{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                img{
                    width: 110px;
                    height: 110px;
                }
                p{
                    white-space: nowrap;
                }
            }
        }
    }
</style>
